<template>
  <span
    class="input-field-payment-record row no-wrap"
    v-if="Field"
  >
    <span
      :class="`field-label field-label-readonly ${(Field.Label && Field.Label.trim().length)
          ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
      v-if="Field.Label !== void 0"
    >
      <q-tooltip
        v-if="Field.Description"
        anchor="top right"
      >{{$t(Field.Description)}}</q-tooltip>{{$t(Field.Label) || ''}}
      <span
        v-if="Field.Required"
        class="required-mark"
      >*</span>
    </span>

    <div class="row q-gutter-md">
      <div
        class="payment-record relative-position"
        :class="{
          paied: rc.Status === '1',
          unpaied: rc.Status !== '1'
        }"
        v-for="(rc, idx) in fieldData" :key="idx">
        <q-icon
          v-if="!Field.ReadOnly &&
            ['0', '1'].indexOf(rc.Status) < 0 && rc.年份 >= new Date().getFullYear()"
          :name="rc.mailSent ? 'fas fa-calendar-check' : 'fas fa-envelope-open-text'"
          class="mail-sent cursor-pointer absolute q-ma-xs"
          :class="{
            active: rc.mailSent
          }"
          @click="sendNotificationEmail(rc)"></q-icon>
        <div class="year text-center">{{ rc.年份 }}</div>
        <div class="amount text-center">{{ rc.金额 }}元</div>

        <div class="row absolute-bottom action-btns" v-if="!Field.ReadOnly">
          <q-btn
            v-if="rc.Status !== '1'"
            class="paied btn" icon="fas fa-check" flat dense size="sm"
            :class="{
              active: rc.Status === '1',
            }"
            :disable="rc.Status === '1'"
            @click="togglePaiedStatus(rc)"></q-btn>
          <q-btn
            v-else
            class="not-paied btn" icon="fas fa-question" flat dense size="xs"
            :class="{
              active: rc.Status !== '1',
            }"
            :disable="rc.Status !== '1'"
            @click="togglePaiedStatus(rc)"></q-btn>
          <q-btn
            class="delete btn q-ml-xs" icon="fas fa-trash" flat dense size="sm"
            @click="deletePaiedRecord(rc)"></q-btn>

          <q-space></q-space>

          <input-field
            class="voucher"
            :values="rc"
            :Field="{
              Type: 'Image',
              Name: '凭证',
              ReadOnly: true,
            }"></input-field>

        </div>
      </div>
    </div>
    <slot name="warning"></slot>
  </span>
</template>

<script>
import { InputFieldMixin } from 'eis-admin-mixins';

export default {
  name: 'InputFieldPaymentRecord',
  mixins: [InputFieldMixin],
  fieldInfo: {
    Category: '成员单位管理',
    Label: '支付记录',
    Value: 'PaymentRecord',
    Description: '',
    DataType: 'Array',
    Extra: [
      {
        Type: 'String',
        Label: '接口根路径',
        Name: 'Options.UrlRoot',
        Default: 'sdcomm',
      },
    ],
  },
  methods: {
    togglePaiedStatus(rc) {
      this.showNotifyDialog({
        content: this.$t(`确认变更${rc.年份}年的支付状态为(${rc.Status === '1' ? '待确认' : '已支付'})？`),
        canCancel: true,
        size: {
          w: 460,
        },
        okText: this.$t('okButtonText'),
        cancelText: this.$t('cancelButtonText'),
      }, () => {
        const urlRoot = this.Field?.Options?.UrlRoot || 'sdcomm';
        this.postRequest(`${urlRoot}/mgmt/payment/change`, {
          mid: this.data.id,
          year: rc.年份,
          status: rc.Status === '1' ? '0' : '1',
        }).then((res) => {
          if (res && res.msg === 'OK') {
            if (rc.Status === '1') {
              rc.Status = '0';
            } else {
              rc.Status = '1';
            }
          } else {
            this.$q.notify(this.$t('变更失败'));
          }
        }).catch(() => {
          this.$q.notify(this.$t('变更失败'));
        });
      });
    },
    deletePaiedRecord(rc) {
      this.showNotifyDialog({
        content: this.$t(`确认删除${rc.年份}年的支付记录？`),
        warning: this.$t('删除后不可恢复!'),
        canCancel: true,
        size: {
          w: 460,
        },
        okText: this.$t('okButtonText'),
        cancelText: this.$t('cancelButtonText'),
      }, () => {
        const urlRoot = this.Field?.Options?.UrlRoot || 'sdcomm';
        this.postRequest(`${urlRoot}/mgmt/payment/delete`, {
          mid: this.data.id,
          year: rc.年份,
        }).then((res) => {
          if (res && res.msg === 'OK') {
            this.fieldData = this.fieldData.filter((item) => item.年份 !== rc.年份);
          } else {
            this.$q.notify(this.$t('删除失败'));
          }
        }).catch(() => {
          this.$q.notify(this.$t('删除失败'));
        });
      });
    },
    sendNotificationEmail(rc) {
      this.showNotifyDialog({
        content: this.$t(`确认${rc.mailSent ? '[再次]' : ''}发送${rc.年份}年的缴费提醒？`),
        canCancel: true,
        size: {
          w: 460,
        },
        okText: this.$t('okButtonText'),
        cancelText: this.$t('cancelButtonText'),
      }, () => {
        const urlRoot = this.Field?.Options?.UrlRoot || 'sdcomm';
        this.postRequest(`/${urlRoot}/mgmt/notify`, {
          mid: this.data.id,
          y: rc.年份,
        }).then((res) => {
          if (res && res.msg === 'OK') {
            this.$q.notify(this.$t('发送提醒邮件成功！'));
            this.fieldData = this.fieldData.map((fd) => {
              if (fd.年份 === rc.年份) {
                fd.mailSent = true;
              }
              return fd;
            });
          }
        }).catch(() => {
          this.$q.notify(this.$t('删除失败'));
        });
      });
    },
    showNotifyDialog(options, func) {
      this.$MsgDialog({ type: '', ...options })
        .then(() => {
          if (func && typeof func === 'function') {
            func();
          }
        })
        .catch(() => { });
    },
  },
};
</script>

<style lang="scss" scoped>
.input-field-payment-record {
  .payment-record {
    width: 90px;
    height: 90px;
    color: white;
    border-radius: 4px;

    &.paied {
      border: 2px solid #20a060;
      color: #20a060;
    }

    &.unpaied {
      border: 2px solid $grey-3;
      color: unset;
    }

    .year {
      font-size: 1.5rem;
      padding-top: 4px;
    }

    .amount {
      font-size: 12px;
      line-height: 16px;
    }

    .action-btns {
      margin: 1px;
    }

    .voucher {
      margin: 0;
      height: 24px;
      width: 24px;

      :deep(.q-uploader) {
        margin-left: 0;
        background-color: transparent;
      }
      :deep(.input-field-image), :deep(.e-icon), :deep(.file-list-item) {
        background-color: transparent;
        border: 0;
        margin-top: 0;
        height: 24px;
        width: 24px;

        i {
          margin-top: -16px;
          font-size: 24px;
        }
      }
      :deep(.file-list) {
        top: 0;
      }
    }

    .mail-sent {
        opacity: 0.3;
      &.active {
        opacity: 1;
      }
    }
  }
}
</style>
